
var settings;
var timer; // 倒计时秒计算
var data; // 默认存储倒计时时长

var circleSeconds;
var interval; //存储 倒计时计时器主键属性

var layerSeconds;

var element;
var callbackFunction;

$.fn.countDown = function (options, callback) {
    element = $(this);

    // Element is not visibile
    if (!element.is(':visible')) {
        return;
    }

    var defaults = $.extend({
        second: undefined,
        selectors: {
            value_seconds: '.time-remain',
            canvas_seconds: 'canvas-seconds',
        },
        seconds: {
            borderColor: '#7995D5',
            borderWidth: '6'
        }
    }, options);
    settings = $.extend({}, defaults, options);
    if (isNaN(settings.second))
        return false;

    data = settings.second;
    if (element.data('border-color')) {
        settings.seconds.borderColor = element.data('border-color');
    }

    if (typeof callback == 'function') {
        callbackFunction = callback;
    }

    dispatchTimer();
    prepareCounters();
    startCounters();
};

function convertToDeg(degree) {
    return (Math.PI / 180) * degree - (Math.PI / 180) * 90
}

/**
 * 用于存储初始倒计时时间，后续变量依据此判断剩余时长
 */
function dispatchTimer() {
    timer = {
        seconds: settings.second
    }
}

/**
 * 绘画倒计时动画
 */
function prepareCounters() {
    var seconds_width = $('#' + settings.selectors.canvas_seconds).width()
    var secondsStage = new Kinetic.Stage({
        container: settings.selectors.canvas_seconds,
        width: seconds_width,
        height: seconds_width
    });

    circleSeconds = new Kinetic.Shape({
        drawFunc: function (context) {
            var seconds_width = $('#' + settings.selectors.canvas_seconds).width()
            var radius = seconds_width / 2 - settings.seconds.borderWidth / 2;
            var x = seconds_width / 2;
            var y = seconds_width / 2;
            context.beginPath();
            if (timer.seconds == data)
                context.arc(x, y, radius, convertToDeg(data * 6 * 6), convertToDeg(0));
            else
                context.arc(x, y, radius, convertToDeg(-timer.seconds * 6 * 6), convertToDeg(0));

            context.fillStrokeShape(this);
            $(settings.selectors.value_seconds).html(timer.seconds);
        },
        stroke: settings.seconds.borderColor,
        strokeWidth: settings.seconds.borderWidth
    });

    layerSeconds = new Kinetic.Layer();
    layerSeconds.add(circleSeconds);
    secondsStage.add(layerSeconds);
}

/**
 * 开始倒计时动作
 */
function startCounters() {
    interval = setInterval(function () {
        if (timer.seconds == 0) {
            clearInterval(interval);
            if (callbackFunction !== undefined) {
                let val = callbackFunction.call(this);
                console.log(val)
                restartInterval(data + 1);
            }
        }
        timer.seconds--;
        layerSeconds.draw();
    }, 1000);
}

/**
 * 重新恢复倒计时操作
 */
function restartInterval(reSetdata) {
    timer.seconds = reSetdata;
    interval = setInterval(function () {
        if (timer.seconds == 0) {
            if (callbackFunction !== undefined) {
                clearInterval(interval);
                let val = callbackFunction.call(this);
                console.log(val)
                restartInterval(data + 1);
            }
        }
        timer.seconds--;
        layerSeconds.draw();
    }, 1000);
}

/**
 * 重置倒计时操作
 */
function reSetCountDown() {
    timer.seconds = 0;
    clearInterval(interval);
    layerSeconds.draw();
    if (callbackFunction !== undefined) {
        let val = callbackFunction.call(this);
        console.log(val)
        restartInterval(data + 1);
    }
}